<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="服务名称" class="handle-input mr10" clearable></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd" v-permiss="17">新增</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="pageLoading">
				<el-table-column prop="id" label="编号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="服务名称"></el-table-column>
				<el-table-column prop="seq" label="序号" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.state === 1">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.state === 0">禁用</el-tag>
          </template>
        </el-table-column>
				<el-table-column prop="createTime" label="添加时间" :show-overflow-tooltip="true" min-width="120"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text type="warning" key="warning" :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="18">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 新增/编辑弹出框 -->
		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="40%">
			<el-form label-width="70px">
				<el-form-item label="编号" v-if="form.id">
					<el-input v-model="form.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="服务名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
        <el-form-item label="状态" prop="gender">
          <el-radio-group v-model="form.state">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model="form.seq"></el-input>
        </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,Document } from '@element-plus/icons-vue';
import {
  addAddressBookApi, addServiceTypeApi,
  fetchData, getAddressBookListApi,
  getCompanyOptions,
  getHouseKeeperApi,
  getHouseKeeperListApi, getServiceTypeListApi,
  getTypeOptions, updateAddressBookApi,
  updateHouseKeeperApi, updateServiceTypeApi
} from '../api/index';
import address from "../assets/json/address.json";

const query = reactive({
	phone: '',
	name: '',
	pageNum: 1,
	pageSize: 10
});
const tableData = ref([]);
const pageTotal = ref(0);
const pageLoading = ref(false);
// 获取表格数据
const getData = async () => {
	pageLoading.value = true;
	const res = await getServiceTypeListApi(query);
	if (res) {
		tableData.value = res.data.content;
		pageTotal.value = res.data.count;
	}
	pageLoading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 表单信息
let form = reactive({
	id: null,
	name: '',
	state: '',
  seq: ''
});
const dialogVisible = ref(false);
const addressRef = ref();
// 新增
const handleAdd = async () => {
	Object.keys(form).forEach((key:any) => form[key] = '');
	dialogVisible.value = true;
	await nextTick(() => {
		addressRef.value.clearSelected();
	});
};
// 修改
const handleEdit = async (index: number, row: any) => {
	Object.keys(form).map((name:any) => form[name] = row[name]);
	dialogVisible.value = true;
	await nextTick(() => {
		addressRef.value.initShow(form.province, form.city, form.town);
	});
};
// 保存新增或修改信息
const save = async () => {
	if (form.id) {
		const res = await updateServiceTypeApi(form);
		if (res) {
			await getData();
			dialogVisible.value = false;
			ElMessage.success(`修改成功`);
		}
	} else {
		const res = await addServiceTypeApi(form);
		if (res) {
			await getData();
			dialogVisible.value = false;
			ElMessage.success(`添加成功`);
		}
	}
};

// 省市区组件发生修改时同步表单信息
const selectedAddress = (address: any) => {
	console.log("selectedAddress", address);
	form.province = address.province;
	form.city = address.city;
	form.town = address.town;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 180px;
}

.handle-input {
	width: 180px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
